<div class="pm_modal {{ctrl.class}}" role="dialog" style="display: block;">
    <form class="modal-dialog customProPlan-modal" name="customPlanForm" ng-submit="ctrl.submit()" ng-class="{ 'customProPlan-needMoreMember': ctrl.needMoreMember }" novalidate>
        <button type="button" ng-click="ctrl.close()" aria-hidden="true" title-translate="Close" title-translate-context="Action" class="fa fa-times close"></button>
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" translate-context="Title for the custom plan modal" translate>Plan Details</h4>
            </div>
            <div class="modal-body">
                <label translate-context="Label in the custom plan modal" translate>Users</label>
                <div class="pm_grid">
                    <div class="col-3-4">
                        <slider data-value="ctrl.sliders.members.value" data-options="ctrl.sliders.members.options"></slider>
                    </div>
                    <div class="col-1-4">
                        <strong class="customProPlan-counter customProPlan-members-counter">{{ ctrl.format('members') }}</strong>
                        <button type="button" ng-click="ctrl.needMore()" class="pm_button link customProPlan-members-link" translate-context="Action" translate>Need more users?</button>
                    </div>
                </div>
                <label translate-context="Label in the custom plan modal" translate>Total Storage</label>
                <div class="pm_grid">
                    <div class="col-3-4">
                        <slider data-value="ctrl.sliders.storage.value" data-options="ctrl.sliders.storage.options"></slider>
                    </div>
                    <div class="col-1-4">
                        <strong class="customProPlan-counter">{{ ctrl.format('storage') }}</strong>
                    </div>
                </div>
                <label translate-context="Label in the custom plan modal" translate>Total Addresses</label>
                <div class="pm_grid">
                    <div class="col-3-4">
                        <slider data-value="ctrl.sliders.addresses.value" data-options="ctrl.sliders.addresses.options"></slider>
                    </div>
                    <div class="col-1-4">
                        <strong class="customProPlan-counter">{{ ctrl.format('addresses') }}</strong>
                    </div>
                </div>
                <p class="alert alert-info" translate-context="Info present in the custom professional plan modal" translate>Each user adds 5GB of storage and 5 addresses to your organization. Professional plans start with 5 addresses included. Storage and addresses can be distributed among users however you wish.</p>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" ng-click="ctrl.close()" class="pm_button modal-footer-button" translate-context="Action" translate>Cancel</button>
            <button tabindex="1" class="pm_button primary modal-footer-button" translate-context="Action" translate>Save</button>
        </div>
    </form>
    <div class="modal-overlay"></div>
</div>
